<template>
  <div class="out">
    <zHeader pageTitle="VR全景"></zHeader>
    <div class="preview-box">
      <iframe :src="VRUrl" class="vrviewer"
        allow="xr-spatial-tracking; fullscreen; gyroscope; accelerometer; magnetometer"
        referrerpolicy="no-referrer-when-downgrade">
      </iframe>
    </div>
  </div>

</template>

<script setup>
import { postStoreInfo } from '@/api/fangWuInfo/index.js'
import { getUserId } from '@/config/config.js'
import { pageConstant } from '@/config/contant.js'
import { onMounted } from 'vue'
import { postJingZhuangYangBanList } from '@/api/jinzhuangyangban/index.js'

const VRUrl = ref('')
const huxingName = ref('') // 这里可以根据实际情况设置户型名称
const loadStoreInfoData = () => {
  const userId = getUserId();
  if (userId) {
    postStoreInfo({ userId: userId }).then(res => {
      if (res.data.code == pageConstant.okCode) {
        if (res.data.data) {
          // console.log(res.data.data);
          const storeInfo = res.data.data;
          console.log('商铺信息:', storeInfo);
          huxingName.value = storeInfo.huXing || '未知户型'
          console.log('户型名称:', huxingName.value);
          if (storeInfo.xiaoQuId) {
            postJingZhuangYangBanList({ guanLianId: storeInfo.xiaoQuId }).then(response => {
              console.log('精装样板列表:', response.data);
              if (response.data.code == pageConstant.okCode) {
                if (response.data.data && response.data.data.length > 0) {
                  for (let item of response.data.data) {
                    if (item.jingZhuangYangBanFangName == huxingName.value) {
                      VRUrl.value = item.lianJie
                      console.log('匹配到VR地址', VRUrl.value);
                      break
                    }
                  }
                }
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      }
    }).catch(err => {
      console.log(err)
    })
  }
}
onMounted(() => {
  loadStoreInfoData();
})
</script>

<style lang="scss" scoped>
.out {
  background-color: rgb(241, 241, 241);
  min-height: 100dvh;

.preview-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed; /* Ensure it covers the entire viewport */
}
.vrviewer { /* Consider renaming this class if it's not a PDF viewer */
  width: 100%;
  height: calc(100% - 50px); /* Adjust height as needed */
  border: none; /* Remove iframe border */
}
}
</style>